<template>
	<view class="file-list">
		<view class="file-item" v-for="(file, index) in files" :key="index" @longpress="onLongPress(file.id, index)"
			@click="isMultiSelect ? onSelect(file.id) : openFile(file)">
			<!-- 多选模式下的复选框 -->
			<view v-if="isMultiSelect" class="checkbox-wrapper" @click.stop="onSelect(file.id)">
				<view class="checkbox" :class="{ 'checked': isSelected(file.id) }">
					<u-icon v-if="isSelected(file.id)" name="checkmark" color="#fff" size="24"></u-icon>
				</view>
			</view>

			<view class="file-info">
				<!-- <u-icon name="file-text" size="50" color="#4285f4"></u-icon> -->
				<view style="display: flex;flex-flow: column;justify-content: center;align-items: center;">
					<image :src="getFileIcon(file.name)" mode="aspectFit" style="width: 46px; height:36px;"></image>
					<text style="color: red;font-size: 20rpx;" v-if="file.document.progress<1"> 解析:{{parseInt(file.document.progress*100)}}%</text>
					<text style="color: green;font-size: 20rpx;" v-else> 解析:{{parseInt(file.document.progress*100)}}%</text>
				</view>
				<view class="file-details">
					<text class="file-name">{{file.name}}</text>
					<text class="file-type">{{getFileTypeText(file)}}</text>
				</view>
			</view>
			<image class="file-preview" :src="file.preview" mode="aspectFit"></image>
		</view>

		<!-- 空状态提示 -->
		<view class="empty-state" v-if="files.length === 0">
			<u-icon name="folder" size="80" color="#CCCCCC"></u-icon>
			<text class="empty-text">暂无文件，请上传</text>
		</view>

		<!-- 提示信息 -->
		<view class="tip-container" v-if="files.length > 0 && !isMultiSelect">
			<text class="tip-text">提示: 长按文件进入多选模式</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'FileList',
		props: {
			files: {
				type: Array,
				default: () => []
			},
			isMultiSelect: {
				type: Boolean,
				default: false
			},
			selectedIds: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				isOpening: false, // 控制文件打开状态
			}
		},
		methods: {
			onLongPress(fileId, index) {
				// 如果已经在多选模式，则选择/取消选择该文件
				if (this.isMultiSelect) {
					this.onSelect(fileId);
					return;
				}

				// 如果不在多选模式，则启用多选模式并选中当前长按的文件
				this.$emit('enableMultiSelect', fileId);
			},
			onDelete(index) {
				// 现在删除功能只在非多选模式下通过其他方式触发
				if (!this.isMultiSelect) {
					this.$emit('delete', index);
				}
			},
			onPreview(file) {
				this.$emit('preview', file)
			},
			onSelect(fileId) {
				this.$emit('select', fileId)
			},
			isSelected(fileId) {
				return this.selectedIds.includes(fileId)
			},
			// 根据文件后缀获取文件类型文本
			getFileTypeText(file) {
				// 如果文件对象中已经定义了type属性，则直接使用
				// if (file.type) {
				//   return file.type;
				// }

				// 从文件名获取后缀
				const fileName = file.name || '';
				const fileExtension = fileName.substring(fileName.lastIndexOf('.')).toLowerCase();

				// 根据后缀返回对应的文件类型
				switch (fileExtension) {
					case '.doc':
					case '.docx':
						return 'Word文件';
					case '.xls':
					case '.xlsx':
						return 'Excel文件';
					case '.ppt':
					case '.pptx':
						return 'PPT文件';
					case '.pdf':
						return 'PDF文件';
					case '.txt':
						return '文本文件';
					case '.jpg':
					case '.jpeg':
					case '.png':
					case '.gif':
						return '图片文件';
					case '.zip':
					case '.rar':
						return '压缩文件';
					default:
						return '未知文件';
				}
			},
			getFileIcon(fileName) {
				console.log("")
				const extension = fileName.split('.').pop().toLowerCase();
				// 根据文件扩展名返回对应的图标路径
				const iconMap = {
					'pdf': '/static/file_icon/pdf.png',
					'doc': '/static/file_icon/word.png',
					'docx': '/static/file_icon/word.png',
					'xls': '/static/file_icon/excel.png',
					'xlsx': '/static/file_icon/excel.png',
					'ppt': '/static/file_icon/powerpoint.png',
					'pptx': '/static/file_icon/powerpoint.png',
					'txt': '/static/file_icon/text.png',
					'jpg': '/static/file_icon/image.png',
					'jpeg': '/static/file_icon/image.png',
					'png': '/static/file_icon/image.png',
					'gif': '/static/file_icon/image.png',
					'zip': '/static/file_icon/zip.png',
					'rar': '/static/file_icon/zip.png'
				};

				return iconMap[extension] || '/static/icons/default.png';
			},
			openFile(file) {
				this.$emit('open', file);
			}

		}
	}
</script>

<style lang="scss" scoped>
	.file-list {
		padding: 0 30rpx;

		.file-item {
			background-color: #ffffff;
			padding: 30rpx;
			margin-bottom: 20rpx;
			border-radius: 12rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.checkbox-wrapper {
				margin-right: 20rpx;

				.checkbox {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					border: 2rpx solid #CCCCCC;
					display: flex;
					justify-content: center;
					align-items: center;

					&.checked {
						background-color: #4285f4;
						border-color: #4285f4;
					}
				}
			}

			.file-info {
				display: flex;
				align-items: center;
				flex: 1;

				.file-details {
					margin-left: 20rpx;
					position: relative;
					min-height: 90rpx;
					display: flex;
					flex-direction: column;
					flex: 1;
					width: 0;

					.file-name {
						font-size: 32rpx;
						color: #333;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						max-width: 400rpx;
						/* 设置最大宽度，根据实际需要调整 */
					}

					.file-type {
						font-size: 24rpx;
						color: #999;
						position: absolute;
						bottom: 0;
						left: 0;
					}
				}
			}

			.file-preview {
				width: 120rpx;
				height: 120rpx;
				border-radius: 8rpx;
				background-color: #e8f4fc;
				border: 1px solid #d0e6f7;
				position: relative;
				overflow: hidden;

				&::before {
					content: '';
					position: absolute;
					top: 20%;
					left: 20%;
					width: 60%;
					height: 10%;
					background-color: #a3c7e3;
					border-radius: 4rpx;
				}

				&::after {
					content: '';
					position: absolute;
					top: 45%;
					left: 20%;
					width: 60%;
					height: 30%;
					background-color: #a3c7e3;
					border-radius: 4rpx;
					opacity: 0.7;
				}
			}
		}

		.empty-state {
			padding: 100rpx 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.empty-text {
				margin-top: 20rpx;
				font-size: 28rpx;
				color: #999;
			}
		}

		.tip-container {
			padding: 20rpx 0;
			display: flex;
			justify-content: center;
			align-items: center;

			.tip-text {
				font-size: 28rpx;
				color: #999;
			}
		}
	}
</style>